<template>
  <div class="recommendContainer">
    <div class="listTitle">周末去哪儿</div>
    <div class="recommend border-bottom" v-for="item of list" :key="item.id">
      <div class="imgLeft">
        <img :src="item.imgUrl" alt="">
      </div>
      <div class="infoRight">
        <div class="title g-overflow-hidden">{{item.title}}</div>
        <div class="desc g-overflow-hidden">{{item.desc}}</div>
      </div>
    </div>
  </div>
</template>
<script type='text/babel'>
export default {
  props: {
    list: Array
  },
  data () {
    return {
    }
  },
  created () {
  },
  methods: {},
  components: {}
}
</script>
<style scoped lang="scss" rel="stylesheet/scss">
  @import "../../../assets/styles/variable";
  .recommendContainer{
    margin-top: .2rem;
    background: #fff;
    .listTitle{
      height:.8rem;
      line-height:.9rem;
      color: #333;
      font-size: 16px;
      padding: 0 .2rem;
    }
    .recommend{
      padding: .2rem 0;
      /*margin: 0 .2rem;*/
      .imgLeft{
        width:100%;
        height: 0;
        overflow: hidden;
        padding-bottom: 37%;
        img{
          width:100%;
        }
      }
      .infoRight{
        padding: 0 .2rem;
        .title{
          margin-top: .2rem;
          margin-bottom: .15rem;
          line-height:.40rem;
          color: #333;
        }
        .desc{
          margin-bottom: .2rem;
          color: #999;
          font-size: 12px;
        }
      }
    }
  }
</style>
